<template>
    <el-main class="image-main" v-loading="loading">
        <div class="top">
            <!-- <div v-for="(item, index) in list"  :key="index">{{ item.url }}</div> -->
            <el-row :gutter="20">
                <el-col :span="6" :offset="0" v-for="(item, index) in list" :key="index">
                    <el-card shadow="hover" class="relative" style="margin-bottom: 10px;">
                        <el-image :src="item.url" fit="cover" :lazy="true" class="w-full h-[150px]"
                            :preview-src-list="[item.url]" :initial-index="0"></el-image>
                        <div class="img_name truncate">{{ item.name }}</div>
                        <div class="flex items-center justify-center p-2">
                            <el-button type="success" text size="small" @click="handEdit(item)" plain>重命名</el-button>


                            <el-popconfirm title="是否删除该图片?" confirm-button-text="确认" cancel-button-text="取消"
                                @confirm="handDelete(item)">
                                <template #reference>
                                    <el-button type="danger" text size="small" plain>删除</el-button>
                                </template>
                            </el-popconfirm>
                        </div>
                    </el-card>
                </el-col>
            </el-row>

        </div>
        <div class="bottom">
            <el-pagination small background layout="prev,pager,next" :total="total" :current-page="currentPage"
                :page-size="limit" @current-change="getData" />
        </div>
    </el-main>

    <FormDrawer ref="uploadFille">
        上传图片
    </FormDrawer>

    <el-drawer v-model="drawer" title="上传图片">
        <UploadFile :data="{image_class_id}" @success="handUpload"></UploadFile>
    </el-drawer>
</template>

<script setup>
import { ref, reactive, computed, getCurrentInstance } from 'vue'
import { getImageList, editImg, deleteImg } from '~/api/image_class.js'
import { success, showPrompt } from '~/composables/util.js'
import FormDrawer from './FormDrawer.vue';
import UploadFile from './UploadFile.vue';




//加载loading
const loading = ref(false)
const uploadFille = ref(null)
const list = ref([])
//分页
const currentPage = ref(1)
const total = ref(0)
const limit = ref(10)
const drawer=ref(false)

const image_class_id = ref(0)
//获取数据
function getData(p = null) {
    if (typeof p == 'number') {
        currentPage.value = p
    }
    loading.value = true
    getImageList(image_class_id.value, currentPage.value).then(res => {
        console.log(res)
        list.value = res.list
        total.value = res.totalCount
    }).finally(() => {
        loading.value = false
    })
}
const instance = getCurrentInstance()
instance?.proxy?.$Bus.on('on-num', (num) => {
    loadData(num)
})
//根据分类ID,重新加载图片
const loadData = (id) => {
    currentPage.value = 1
    image_class_id.value = id
    getData()
}


//重命名
const handEdit = (item) => {
    showPrompt('重命名', item.name).then(res => {
        loading.value = true
        editImg(item.id, res.value).then(res => {
            success('修改成功')
            getData()
        }).finally(() => {
            loading.value = false
        })
    })
}
//删除
const handDelete = (item) => {
    loading.value = true
    deleteImg([item.id]).then(res => {
        success('删除成功')
        getData()
    }).finally(() => {
        loading.value = false
    })
}

//打开上传图片抽屉
const handleUpload = () => {
    // uploadFille.value.open()
    drawer.value=true
}
//上传成功
const handUpload=()=>{
    getData()
}

defineExpose({
    loadData,
    handleUpload
})
</script>

<style scoped>
.image-main {
    position: relative;
}

.image-main .top {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 50px;
    overflow-y: auto;
}

.image-main .bottom {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img_name {
    width: 100%;
    height: 30px;
    line-height: 30px;
    background-color: bisque;
}
</style>